<template>
  <div>
    <el-form :inline="true" :model="Forms" class="demo-form-inline">
      <el-row>
      <el-form-item label="关键词">
        <el-input v-model="key" placeholder="关键词"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getdata">查询</el-button>
      </el-form-item>
       </el-row>

      <el-button type="primary" @click="dialogFormVisible = true">
        添加</el-button>

      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item
            label="账号"
            prop="username"
            :label-width="formLabelWidth"
          >
            <el-input v-model="Forms.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
            <el-input v-model="Forms.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="typeid"
            :label-width="formLabelWidth"
          >
            <el-input v-model="Forms.typeid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
            <el-input v-model="Forms.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="联系方式"
            prop="tel"
            :label-width="formLabelWidth"
          >
            <el-input v-model="Forms.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="角色"
            prop="update"
            v-model="Forms.typeName"
            :label-width="formLabelWidth"
          >
            <el-select v-model="update" placeholder="请选择">
              <el-option
                v-for="item in update"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="postadd">确 定</el-button>
        </div>
      </el-dialog>
      <!-- <el-table -->
        <!-- ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"> -->
        <!-- <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" prop="id" width="240">
      
          
        </el-table-column>
         <el-table-column prop="username" label="登录账号" width="240">
        </el-table-column>
      
        <el-table-column prop="name" label="姓名" width="240">
        </el-table-column>
        <el-table-column prop="tel" label="手机号" width="240">
        </el-table-column>
        <el-table-column prop="typeName" label="类型" width="240">
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="240">
          <template slot-scope="scope">
               <el-button type="success">修改</el-button>
              <el-button type="danger" @click="getdelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column> -->
      <!-- </el-table> -->
      <TableList 
        :tableData="tableData"
        :tableHead="tableHead"
        @delect='getdelete'
        @dialogFormVisible='dialogFormVisible'
        @modification='modification'
      />
      <div class="black">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
// import axios from "axios";
import TableList from '../tt/Table.vue'
import { postadd, getdata } from "../utils/utils";
export default {
  components:{
    TableList
  },
  data() {
    return {
      tableHead:[
         {
            label:'ID',
            prop:'id'
           },
             {
            label:'登录账号',
            prop:'username'
           },
             {
            label:'姓名',
            prop:'name'
           },
             {
            label:'手机号',
            prop:'tel'
           },
             {
            label:'类型',
            prop:'typeName'
           },
             {
            label:'操作',
            type:'button',
            button:{
              update:true,
              delete:true
            }
           },
      ],
      page:1,
      pageSize:5,
      key:"",
      update: [
        {
          id: 0,
          // name: "", 
        },
      ],
      value: "",
      Forms: {
        username: "",
        pass: "",
        name: "",
        tel: "",
        id:0
      },
      input: "",
      gridData: [],
      form: {
        name: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      multipleSelection: [],
      formInline: {
        //   user: '',
        //   region: ''
      },
    };
  },
  mounted() {
    this.getdata();
     
    // this.getdelete()
  },
 
  methods: {
  async  modification(val,data){
      this.dialogFormVisible = val
       if(val){
         this.dialogFormVisible = !!val
         if(this.dialogFormVisible){
           const res = this.tableData.find(item=>item.id == data.id)
           this.Forms= res
          //  console.log(res)
         }
               
       }
    },
    async postadd() {
      const data = await postadd({
        id: this.Forms.id,
        username: this.Forms.username,
        name: this.Forms.name,
        tel: this.Forms.tel,
        typeid: this.Forms.typeid,
      });
      // console.log("222", data);
      if(data.errCode == 10000){
       this.$message({
         type:'success',
          message:'添加成功'
       })
       this.dialogFormVisible = false
        this.getdata()
      }
    },
 handleSelectionChange(val){
    this.qwe = val
  },
  // 单删
   getdelete(val){
     console.log(val)
     const params={
        Authorization:sessionStorage.getItem('token'),
        }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(()=>{
               axios.get('/api/administrator/delete?id='+val,{headers:params}).then(res=>{
                 this.tableData=[]
                 this.getdata()
               })
               console.log(val)
               this.$message({
               type: 'success',
               message: '删除成功!',
             });
             console.log(222)
             }).catch(() => {
             this.$message({
           type: 'info',
            message: '已取消删除'
         });
        });
  },
    //   渲染页面
    async getdata() {
      const res = await getdata({
        page:this.page,
        psize:this.pageSize,
        key:this.key,
      });
      console.log("11111", res);
      this.tableData = res.data.list;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style>
.black {
  text-align: center;
}
</style>